//import createjs from "../../createjs";
import cjs=createjs
export default class ScaleSpriteSheet extends cjs.DisplayObject{
    /** 用来渲染的图像。可以是Image，或者Canvas，又或者Video。 */
    image: HTMLImageElement|HTMLCanvasElement|HTMLVideoElement;
    /** 绘制宽度 */
    drawWidth: number;
    /** 绘制高度 */
    drawHeight: number;
    /** 指定九区域缩放网格的内部矩形 */
    scale9Grid: cjs.Rectangle;
    /** 源图的裁剪区域 */
    sourceRectangle: cjs.Rectangle;
    /** ScaleSpriteSheet是否应在整个像素坐标下绘制到画布 */
    snapToPixel:boolean=true
    /**
     * 
     * @param imageOrUri 源图或者链接地址
     * @param sourceRectangle 源图的裁剪区域
     * @param scale9Grid 指定九区域缩放网格的内部矩形
     */
    constructor(imageOrUri:string|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement, sourceRectangle:cjs.Rectangle, scale9Grid:cjs.Rectangle){
        super()
        if (typeof imageOrUri == "string") {
			this.image = new Image();
			this.image.src = imageOrUri;
		} else {
			this.image = imageOrUri;
		}
        this.drawWidth = sourceRectangle.width;
        this.drawHeight = sourceRectangle.height;
        this.scale9Grid = scale9Grid;
        this.sourceRectangle=sourceRectangle;
    }
    /**
     * 更改用于绘制ScaleSpriteSheet的尺寸
     * @param newWidth 
     * @param newHeight 
     */
    setDrawSize(newWidth:number, newHeight:number):void{
        this.drawWidth = newWidth;
		this.drawHeight = newHeight;
    }
    isVisible():boolean{
        const hasContent = this.cacheCanvas || (this.image);
		return !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);
    }
    draw(ctx: CanvasRenderingContext2D, ignoreCache?: boolean): boolean {
        if(super.draw(ctx,ignoreCache))return true
        const centerX = this.scale9Grid.width;
		const centerY = this.scale9Grid.height;
		if(centerX == 0) //vertical
		{
			if(centerY == 0)
			{
				throw "One of scale9Grid width or height must be greater than zero.";
			}
			const imageWidth = this.sourceRectangle.width;
			const scale3Region1 = this.scale9Grid.y;
			const scale3Region3 = this.sourceRectangle.height - scale3Region1 - centerY;
			var oppositeEdgeScale = this.drawWidth / imageWidth;
			var scaledFirstRegion = scale3Region1 * oppositeEdgeScale;
			var scaledThirdRegion = scale3Region3 * oppositeEdgeScale;
			var scaledSecondRegion = this.drawHeight - scaledFirstRegion - scaledThirdRegion;

			ctx.drawImage(this.image, this.sourceRectangle.x, this.sourceRectangle.y, imageWidth, scale3Region1, 0, 0, this.drawWidth, scaledFirstRegion);
			ctx.drawImage(this.image, this.sourceRectangle.x, this.sourceRectangle.y+scale3Region1, imageWidth, centerY, 0, scaledFirstRegion, this.drawWidth, scaledSecondRegion);
			ctx.drawImage(this.image, this.sourceRectangle.x, this.sourceRectangle.y+scale3Region1 + centerY, imageWidth, scale3Region3, 0, scaledFirstRegion + scaledSecondRegion, this.drawWidth, scaledThirdRegion);
		}
		else if(centerY == 0) //horizontal
		{
			const imageHeight = this.sourceRectangle.height;
			const scale3Region1 = this.scale9Grid.x;
			const scale3Region3 = this.sourceRectangle.width - scale3Region1 - centerX;
			oppositeEdgeScale = this.drawHeight / imageHeight;
			scaledFirstRegion = scale3Region1 * oppositeEdgeScale;
			scaledThirdRegion = scale3Region3 * oppositeEdgeScale;
			scaledSecondRegion = this.drawWidth - scaledFirstRegion - scaledThirdRegion;

			ctx.drawImage(this.image, this.sourceRectangle.x, this.sourceRectangle.y, scale3Region1, imageHeight, 0, 0, scaledFirstRegion, this.drawHeight);
			ctx.drawImage(this.image, this.sourceRectangle.x+scale3Region1, this.sourceRectangle.y, centerX, imageHeight, scaledFirstRegion, 0, scaledSecondRegion, this.drawHeight);
			ctx.drawImage(this.image, this.sourceRectangle.x+scale3Region1 + centerX, this.sourceRectangle.y, scale3Region3, imageHeight, scaledFirstRegion + scaledSecondRegion, 0, scaledThirdRegion, this.drawHeight);
		}
		else
		{
			var left = this.scale9Grid.x;
			var top = this.scale9Grid.y;
			var right = this.sourceRectangle.width - centerX - left;
			var bottom = this.sourceRectangle.height - centerY - top;
			var scaledCenterX = this.drawWidth - left - right;
			var scaledCenterY = this.drawHeight - top - bottom;

			ctx.drawImage(this.image, this.sourceRectangle.x, this.sourceRectangle.y, left, top, 0, 0, left, top);
			ctx.drawImage(this.image, this.sourceRectangle.x+left, this.sourceRectangle.y, centerX, top, left, 0, scaledCenterX, top);
			ctx.drawImage(this.image, this.sourceRectangle.x+left + centerX, this.sourceRectangle.y, right, top, left + scaledCenterX, 0, right, top);

			ctx.drawImage(this.image, this.sourceRectangle.x, this.sourceRectangle.y+top, left, centerY, 0, top, left, scaledCenterY);
			ctx.drawImage(this.image, this.sourceRectangle.x+left, this.sourceRectangle.y+top, centerX, centerY, left, top, scaledCenterX, scaledCenterY);
			ctx.drawImage(this.image, this.sourceRectangle.x+left + centerX, this.sourceRectangle.y+top, right, centerY, left + scaledCenterX, top, right, scaledCenterY);

			ctx.drawImage(this.image, this.sourceRectangle.x, this.sourceRectangle.y+top + centerY, left, bottom, 0, top + scaledCenterY, left, bottom);
			ctx.drawImage(this.image, this.sourceRectangle.x+left, this.sourceRectangle.y+top + centerY, centerX, bottom, left, top + scaledCenterY, scaledCenterX, bottom);
			ctx.drawImage(this.image, this.sourceRectangle.x+left + centerX, this.sourceRectangle.y+top + centerY, right, bottom, left + scaledCenterX, top + scaledCenterY, right, bottom);
		}
        return true;
    }
    getBounds(): cjs.Rectangle {
        return new cjs.Rectangle(0,0,this.drawWidth,this.drawHeight)
    }
}